<template>
  <div class="foots_container up_down_flex bs_bdb">
    <div
      class="foot_icnos bs_bdb cur_poi flex"
      v-for="item in footIcons"
      :key="item.id"
    >
      <img
        v-if="item.id !== 5"
        @click="handleSet(item.id)"
        class="cur_poi"
        :src="item.url"
        alt=""
      />
      <div class="chat_icon flex bs_bdb" v-else @click="handleSet(item)">
        <img class="cur_poi" :src="item.url" alt="" />
        <span class="fs_14">互动消息</span>
      </div>
    </div>

    <el-dialog
      style="width: 505px; height: 400px; background: #152034"
      class="microPh"
      :show-close="false"
      v-model="mikeWin"
      :modal="false"
      align-center
    >
      <div class="microPh_main">
        <img
          @click="closeVoluWin"
          class="close_img"
          src="../assets/close_head.png"
          alt=""
        />
        <div class="title txt_cent fff">声音设置</div>

        <div class="device flex_bt">
          <div class="">
            <div class="lable fff bs_bdb">输入设置</div>
            <el-input
              @input="inInputSlider"
              :min="0"
              :max="100"
              v-model.number="inSliderVol"
              style="width: 190px"
            />
          </div>
          <div class="">
            <div class="lable fff bs_bdb">输出设置</div>
            <!-- <el-input v-model="input" style="width: 190px" /> -->
            <el-input
              @input="inputSlider"
              :min="0"
              :max="100"
              v-model.number="sliderVol"
              style="width: 190px"
            />
          </div>
        </div>
        <div class="audio flex_bt bs_bdb">
          <div class="" @click="testEvt">
            <div class="lable">输入音量</div>
            <div class="vol flex">
              <img
                style="width: 14px; height: 14px"
                src="../assets/speaker.png"
                alt=""
              />
              <!--  -->
              <!-- <div
                style="border: 2px solid red"
                class="line_bar cur_poi"
                id="line_bar"
                ref="lineBarRef"
                @mousedown="mousedown"
                @mousemove="mousemove"
                @mouseup="mouseup"
              >
                <div class="progress" ref="progress1"></div>
                <div class="inner_point" ref="innerPointRef1"></div>
              </div> -->

              <div class="slider-demo-block line_bar">
                <el-slider
                  :show-tooltip="false"
                  id="slider_icon"
                  :min="0"
                  :max="100"
                  @input="inSliderInput"
                  v-model="inSliderVol"
                >
                </el-slider>
              </div>
            </div>
          </div>
          <div class="">
            <div class="lable bs_bdb">输出音量</div>
            <div class="vol flex">
              <img
                style="width: 14px; height: 14px"
                src="../assets/speaker.png"
                alt=""
              />
              <!-- <div class="line_bar"></div> -->
              <!-- <div
                class="line_bar"
                id="line_bar"
                ref="lineBarRef"
                @mousedown="mousedown"
                @mousemove="mousemove"
                @mouseup="mouseup"
              >
                <div class="progress" ref="progress"></div>
                <div class="inner_point" ref="innerPointRef"></div>
              </div> -->
              <div class="slider-demo-block line_bar">
                <el-slider
                  :show-tooltip="false"
                  id="slider_icon_out"
                  :min="0"
                  :max="100"
                  @input="sliderInput"
                  v-model="sliderVol"
                >
                </el-slider>
              </div>
            </div>
          </div>
        </div>
        <div class="fs_14">鼠标左击开始测试麦克风 以下为麦克风收音状态</div>
        <div class="sound_wave flex_row">
          <div
            v-if="!isMikeStatus"
            class="sound_wave_btn fff fs_12 bs_bdb cur_poi"
            @click="handlerMike"
          >
            测试一下
          </div>
          <div
            @click="handlerMike"
            v-if="isMikeStatus"
            class="sound_wave_btn fff fs_12 bs_bdb cur_poi"
          >
            正在测试
          </div>
          <div class="lines_box flex_row">
            <div
              :look="i"
              class="lines"
              v-for="i in 38"
              :key="i"
              :class="{ activ_vol: currentVol >= i }"
            ></div>
            <div class="lines"></div>
          </div>
        </div>
        <div class="flex_bt">
          <div class="flex" @click="isGrowth = !isGrowth">
            <img
              v-if="!isGrowth"
              class="cur_poi"
              style="width: 12px; height: 12px; margin-right: 3px"
              src="../assets/vol.png"
              alt=""
            />
            <img
              v-else
              class="cur_poi"
              style="width: 12px; height: 12px; margin-right: 3px"
              src="../assets/vol_act.png"
              alt=""
            />
            <span>麦克风增强</span>
          </div>
          <div class="flex" @click="isDenoise = !isDenoise">
            <img
              v-if="!isDenoise"
              class="cur_poi"
              style="width: 12px; height: 12px; margin-right: 3px"
              src="../assets/vol.png"
              alt=""
            />
            <img
              v-else
              class="cur_poi"
              style="width: 12px; height: 12px; margin-right: 3px"
              src="../assets/vol_act.png"
              alt=""
            />
            <span>麦克风降噪</span>
          </div>
        </div>
        <div @click="submitSysSet" class="sure_btn fs_18 txt_cent fff">
          确认
        </div>
      </div>
    </el-dialog>
    <!-- 点击设置ico -->
    <div v-if="isSetWin" class="set_box bs_bdb">
      <img
        @click="isSetWin = false"
        class="cur_poi"
        src="../assets/close_head.png"
        alt=""
      />
      <div class="set_title cur_poi fs_18 txt_cent fff">房间管理</div>
      <div
        @click="handleSetType(item)"
        class="set_item cur_poi fff fs_14 bs_bdb"
        v-for="item in mapperLable"
        :key="item.type"
      >
        {{ item.label }}
      </div>
    </div>
    <div class="set_child bs_bdb" v-show="setCurrVal?.isTrue">
      <img
        @click="setCurrVal.isTrue = false"
        class="cur_poi"
        src="../assets/close_head.png"
        alt=""
      />
      <div class="set_child_title txt_cent fff">
        {{ setCurrVal?.label?.replace("列表", "") }}
      </div>
      <div
        class="set_child_item flex_bt fff bs_bdb"
        v-for="item in setList?.[setCurrVal?.type]"
        :key="item.id"
      >
        <div class="img_box up_down_flex">
          <div class="img bd_radio">
            <img
              class="bd_radio"
              :src="item.headimgurl"
              style="width: 40px; height: 40px"
              alt=""
            />
          </div>
          <dir class="fs_12">
            <div class="up">{{ item.nickname }}</div>
            <div class="down">{{ getTime(item?.settime) }}</div>
          </dir>
        </div>
        <div class="btn cur_poi fs_12" @click="handleCancle(item)">撤销</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { nextTick, onMounted, reactive, ref, watch } from "vue";
import { useCounterStore } from "../store";
const { ipcRenderer } = require("electron");
import { adminlist, laheilist, jinyanlist } from "../http";
const isMikeStatus = ref(false);
const setList = ref({});
const sliderVol = ref(0);
const inSliderVol = ref(0);
const mikeWinStat = ref(false);
const isDenoise = ref(false);
const isGrowth = ref(false);
const input = ref("");
const store = useCounterStore();
const mikeWin = ref(false);
const footIcons = ref([
  {
    url: new URL("../assets/foot_1.png", import.meta.url).href,
    id: 1,
  },
  {
    url: new URL("../assets/foot_2.png", import.meta.url).href,
    id: 2,
  },
  {
    url: new URL("../assets/foot_3.png", import.meta.url).href,
    id: 3,
  },
  {
    url: new URL("../assets/foot_4.png", import.meta.url).href,
    id: 4,
  },
  {
    url: new URL("../assets/foot_5.png", import.meta.url).href,
    id: 5,
  },
]);
watch(
  () => store.mikeDefu,
  (nv) => {
    console.log("watch-store.mikeDefu", nv);
    store.roomContent?.rtcController?._rtc?.localStream?.setCaptureVolume(
      10 * nv,
      "microphone"
    );
  }
);
const isSetWin = ref(false);
const mapperLable = ref([
  {
    label: "管理员列表",
    type: "adminlist",
    isTrue: false,
  },
  {
    label: "禁言列表",
    type: "jinyanlist",
    isTrue: false,
  },
  {
    label: "黑名单列表",
    type: "laheilist",
    isTrue: false,
  },
]);
const setCurrVal = ref(null);
const handleSetType = async (v) => {
  setCurrVal.value = v;
  if (v.type === "adminlist") {
    let res = await adminlist(
      Number(store.roomLiveInfo.room_archive_id),
      Number(store.roomLiveInfo.id)
    );
    if (res.data.errcode === 0) {
      setList.value[v.type] = res.data.data.items;
    }
  }
  if (v.type === "laheilist") {
    let res = await laheilist(
      Number(store.roomLiveInfo.room_archive_id),
      1,
      10
    );
    if (res.data.errcode === 0) {
      setList.value[v.type] = res.data.data.blacklist;
    }
  }
  if (v.type === "jinyanlist") {
    let res = await jinyanlist(
      Number(store.roomLiveInfo.room_archive_id),
      1,
      10
    );
    setList.value[v.type] = res.data.data.users;
  }
  v.isTrue = true;
};
const getTime = (str = "1730101818") => {
  const dt = new Date(Number(str) * 1000);
  let year = dt.getFullYear();
  let month = String(dt.getMonth() + 1).padStart(2, 0);
  let day = String(dt.getDate()).padStart(2, 0);
  return `${year}年${month}月${day}日`;
};
const handleSet = (val) => {
  console.log("val", val, "mikeWinStat.value", mikeWinStat.value);
  if (val == 1) {
    isSetWin.value = true;
  }
  if (val == 2) {
    mikeWin.value = true; //&& mikeWinStat.value
    nextTick(() => {
      ipcRenderer.on("sysVoluVal", (e, res) => {
        sliderInput(res);
      });
      ipcRenderer.send("getSysVolu");
      inSliderInput(store.mikeDefu);
    });
  }
};
const closeVoluWin = () => {
  isMikeStatus.value = false;
  store.time && clearInterval(store.time);
  mikeWin.value = false;
};
const currentVol = ref(0);
const handlerMike = () => {
  console.log("into-------", mikeWinStat.value);
  if (!mikeWinStat.value) {
    return;
  }

  isMikeStatus.value = !isMikeStatus.value;
  console.log("into----------------isMikeStatus.value", isMikeStatus.value);

  if (!isMikeStatus.value) {
    console.log("t----1");
    if (store.time) {
      store.time && clearInterval(store.time);
      currentVol.value = 0;
    }
    return;
  } else {
    console.log("t----2");
    store.time = setInterval(() => {
      let resss =
        store.roomContent?.rtcController._rtc.localStream.getAudioLevel();
      currentVol.value = Math.round(resss * 0.38);
      return currentVol.value;
    }, 100);
  }
};

watch(
  () => mikeWinStat.value,
  (nv) => {
    console.log("watch- mikeWinStat.value ", nv);
  }
);
const progressWidth = ref(0);
const pointWidth = ref(0);
const progress1 = ref(null);
const lineBarRef = ref(null);
const innerPointRef1 = ref(null);
const lineBarWidth = ref(0);
const isDrag = ref(false);
const startX = ref(0);
const startY = ref(0);

const testEvt = (e) => {
  console.log("eeeeeeeeeee", e);
};
const getIsPlay = (e) => {
  mikeWinStat.value = e;
  console.log("getIsPlay", mikeWin.value);
};
const handlerInpVol = (e) => {
  console.log(Math.abs(e.offsetX), "handlerInpVol", e);
  let offsetX = Math.abs(e.offsetX);

  progressWidth.value = Math.min(offsetX, lineBarWidth.value);
  pointWidth.value = Math.min(offsetX - 10, lineBarWidth.value);
};
const mousedown = (e) => {
  isDrag.value = true;
};
const mousemove = (e) => {
  if (isDrag.value) {
    console.log("e", e);
    console.log(
      "innerPointRef1.value.offsetWidth",
      innerPointRef1.value.offsetWidth
    );
    console.log("lineBarRef.value.offsetWidth", lineBarRef.value.offsetWidth);

    const boxRect = lineBarRef.value.getBoundingClientRect();
    console.log("boxRect", boxRect.width);
    let bar = Math.abs(e.offsetX);
    let pot = Math.abs(e.offsetX);
    console.log("bar:", Math.abs(bar));
    console.log("pot:", pot);
    const progressWidth = bar;
    innerPointRef1.value.style.left = `${pot}px`;
    progress1.value.style.width = `${Math.abs(progressWidth)}px`;
  }
};
watch(
  () => isDrag.value,
  (nv) => {
    console.log("watch-nv", nv);
  }
);
watch(
  () => currentVol.value,
  (nv) => {
    console.log("currentVol.value-watch-nv", nv);
  }
);
const inInputSlider = (e) => {
  console.log("inInputSlider-e-网易api", e);
  if (e <= 100) {
    inSliderInput(Number(e));
  }
};
const inSliderInput = (e) => {
  console.log("inSliderInput-e-网易api---2", e);
  inSliderVol.value = e;
  store.mikeDefu = e;
  console.log("10 * e", 10 * e);

  nextTick(() => {
    let inp = document.querySelector("#myId2");
    if (inp) {
      inp.remove();
    }
    let ele = document.querySelector("#slider_icon");
    console.log("ele-look", ele);
    let img = document.createElement("img");
    img.src = new URL("../assets/ic_cf2.png", import.meta.url).href;
    img.id = "myId2";
    img.classList.add([
      "el-slider__button",
      "el-tooltip__trigger",
      "el-tooltip__trigger",
    ]);
    img.style.width = "36px";
    img.style.height = "36px";
    img.style.transform = "scale(0.5)";
    ele.appendChild(img);
  });
};
const mouseup = (e) => {
  isDrag.value = false;
};

const sliderInput = (e) => {
  console.log("process-e", e);
  sliderVol.value = e;
  ipcRenderer.send("setSysVolu", sliderVol.value);
  nextTick(() => {
    let inp = document.querySelector("#myId");
    if (inp) {
      inp.remove();
    }
    let ele = document.querySelector("#slider_icon_out");
    console.log("ele-look", ele);
    let img = document.createElement("img");
    img.src = new URL("../assets/ic_cf1.png", import.meta.url).href;
    // el-slider__button el-tooltip__trigger el-tooltip__trigger
    img.id = "myId";
    img.classList.add([
      "el-slider__button",
      "el-tooltip__trigger",
      "el-tooltip__trigger",
    ]);
    img.style.width = "36px";
    img.style.height = "36px";
    img.style.transform = "scale(0.5)";
    // img.style.position = "absolute";
    // img.style.left = this.value1;
    // img.style.top = "50%";
    // img.style.transform = "translateY(-50%)";
    ele.appendChild(img);
  });
};
const inputSlider = (e) => {
  if (e <= 100) {
    console.log("input-e", e);
    sliderInput(Number(e));
  }
};
const submitSysSet = () => {
  closeVoluWin();
  console.log("mikeWinStat.value---", mikeWinStat.value);
};
onMounted(() => {
  // getIsPlay
  store.mittOb.on("getIsPlay", getIsPlay);
});
</script>

<style lang="scss" scoped>
.foots_container {
  width: 100%;
  height: 52px;
  background: #1d1f22;
  padding: 0 14px;
  .foot_icnos {
    padding: 0 10px;
    img {
      width: 25px;
      height: 25px;
    }
    .chat_icon {
      padding: 5px 10px;
      background: #343739;
      border-radius: 50px 50px 50px 50px;
      span {
        margin-left: 3px;
        color: #a7a6ab;
      }
    }
  }
  .set_box > img,
  .set_child > img {
    width: 25px;
    height: 25px;
    position: absolute;
    right: 8px;
    top: 8px;
  }
  .set_box {
    margin-left: 14px;
    position: absolute;
    bottom: 60px;
    left: 0;
    width: 326px;
    height: 532px;
    background: #282c2f;
    box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
    border-radius: 8px 8px 8px 8px;
    padding: 20px;
    .set_title {
      margin-top: 15px;
    }
    .set_item {
      padding: 18px 0;
    }
  }
  .set_child {
    position: absolute;
    left: 350px;
    bottom: 60px;
    width: 326px;
    height: 532px;
    background: #282c2f;
    box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
    border-radius: 8px 8px 8px 8px;
    padding: 20px;
    .set_child_title {
      margin-top: 15px;
    }
    .set_child_item {
      padding: 18px 0;
      .img {
        margin-right: 10px;
      }
      .btn {
        padding: 7px 22px;
        box-sizing: border-box;
        background: linear-gradient(88deg, #a13cf3 0%, #7e6bfb 100%);
        border-radius: 50px 50px 50px 50px;
      }
    }
  }
  .broom {
    position: absolute;
    bottom: 60px;
    left: 130px;
    background: #1d1f22;
    box-shadow: 0px 1px 2px 2px rgba(0, 0, 0, 0.4);
  }
  // ???
  :deep(.el-dialog).interact_msg {
    padding: 0 15px !important;
    height: 532px;
    background: #282c2f;
    box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
    border-radius: 8px 8px 8px 8px;
  }
  .interact_msg_main {
    // padding: 0 50px;
    .head {
      img {
        width: 24px;
        height: 24px;
      }
    }
    .main {
      padding: 0px 50px;
      margin-top: -8px;
      .main_item_active {
        color: #895cf8;
      }
    }
    .out {
      overflow: auto;
      padding-top: 30px;
    }
    .interact_item {
      margin: 0 15px;
      // border: 1px solid red;
      .down {
        margin-top: 10px;
        padding-left: 5px;
      }
    }

    .interact_item:not(:first-child) {
      padding: 20px 0 10px;
    }
  }
  // 麦克风页面
  :deep(.el-dialog__header) {
    position: relative;
  }
  .microPh_main {
    .close_img {
      position: absolute;
      right: 15px;
      top: 15px;
      width: 25px;
      height: 25px;
    }
    .device {
      margin-top: 15px;
      :deep(.el-input__wrapper) {
        background: #353e4f;
        border-radius: 50px 50px 50px 50px;
        box-shadow: none;
      }
      .lable {
        padding: 0 11px;
        margin-bottom: 7px;
      }
    }
    .audio {
      // padding:0 11px;
      margin-bottom: 30px;
      .lable {
        padding: 16px 0 9px;
      }

      .line_bar {
        width: 168px;
        // height: 6px;
        // background: #b0b1b4;
        border-radius: 0px 0px 0px 0px;
        margin-left: 7px;
        position: relative;
        :deep(.el-slider__button) {
          background-color: none !important;
          height: 0;
          width: 0;
          border: none !important;
        }
        // .inner_point {
        //   width: 10px;
        //   height: 10px;
        //   background: #dcdde0;
        //   position: absolute;
        //   border-radius: 50%;
        //   top: -2px;
        //   left: 1px;
        //   z-index: 9;
        //   cursor: pointer;
        // }
        //
        // .progress {
        //   height: 100%;
        //   background: #a141e0;
        //   position: absolute;
        //   top: 0;
        //   left: 0;
        // }
      }
    }
    .sound_wave {
      margin: 30px 0 20px;
      .sound_wave_btn {
        padding: 4px 11px;
        background: linear-gradient(88deg, #a13cf3 0%, #7e6bfb 100%);
        border-radius: 50px 50px 50px 50px;
        border: none;
      }
      .lines:first-child {
        margin-left: 9px;
      }
      .activ_vol {
        background: blue !important;
      }
      .lines {
        width: 2px;
        height: 20px;
        background: #dcdde0;
        border-radius: 0px 0px 0px 0px;
        // margin-left: 9px;
        margin-right: 8px;
      }
    }
    .sure_btn {
      padding: 6px 0;
      width: 180px;
      background: linear-gradient(88deg, #a13cf3 0%, #7e6bfb 100%);
      border-radius: 50px 50px 50px 50px;
      margin: 15px auto;
    }
  }
}
</style>
